<template>
  <div
    class="field__wrapper"
    :class="[
      formStore?.selectQuestion?.id === field?.id && 'field__wrapper-select',
      field.containerId && 'field__wrapper-cField',
    ]"
    @click.stop="handleSelect"
  >
    <el-form-item class="field__wrapper-formItem">
      <template v-if="!field.containerId">
        <div>
          {{ field.name }}
        </div>
        <div v-if="field.comment">备注：{{ field.comment }}</div>
      </template>
      <slot />
    </el-form-item>
    <div class="drag-handler" v-if="!field.containerId">
      <el-icon>
        <SvgDraghander />
      </el-icon>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useFormStore } from "@bis/stores/form";
import { ref, computed, defineProps, PropType } from "vue";
import QuestionType from "@bis/types/question";

const props = defineProps({
  field: Object as PropType<QuestionType>,
});

const formStore = useFormStore();

const handleSelect = () => {
  if (props.field.containerId) return;
  formStore.setSelectQuestion(props.field);
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
